<template>
  <el-dialog v-model="dialogVisible" :title="title" width="50%" @close="dialogClose">
    <!-- form表单 -->
    <el-form :model="form" label-width="80px" :rules="rules" ref="formRef">
      <el-form-item label="项目名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="源码地址">
        <el-input v-model="form.sourceUrl" />
      </el-form-item>
      <el-form-item label="演示地址">
        <el-input v-model="form.onlineUrl" />
      </el-form-item>
      <el-form-item label="项目介绍" prop="introduce">
        <el-input v-model="form.introduce" type="textarea" />
      </el-form-item>
    </el-form>
    <!-- 底部按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogClose">取消</el-button>
        <el-button type="primary" @click="handleSure">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, computed } from "vue"
import { ElMessage } from "element-plus"
import { createProject, updateProject } from "../../service/api_project"
const props = defineProps({
  title: {
    type: String,
    default: "默认标题"
  },
  dialogVisible: {
    type: Boolean,
    default: false
  },
  project: {
    type: Object,
    default: {
      name: "",
      source_url: "",
      online_url: "",
      introduce: ""
    }
  }
})
const emit = defineEmits(["close", "update", "update:modelVal"])

const dialogVisible = computed({
  get: () => props.dialogVisible,
  set: (value) => emit("update:modelVal", value)
})

// 表单数据
const form = reactive({
  name: props.project.name,
  sourceUrl: props.project.source_url,
  onlineUrl: props.project.online_url,
  introduce: props.project.introduce
})
// 表单元素
const formRef = ref(null)
// 重置表单元素
const reset = () => {
  formRef.value.resetFields()
  form.name = props.project.name
  form.sourceUrl = props.project.source_url
  form.onlineUrl = props.project.online_url
  form.introduce = props.project.introduce
}
// 事件处理
// 通知父组件关闭弹框
const dialogClose = () => {
  emit("close")
  reset()
}
// 通知父组件更新数据
const dataShouldUpdate = () => {
  emit("update")
}
// 确定添加或者更新
const handleSure = async () => {
  try {
    await formRef.value.validate()
    // 执行添加逻辑
    // 判断是更新还是创建
    if (props.project.id) {
      updateProject(props.project.id, {...form}).then(res => {
        ElMessage.success(res.data.msg)
        // 通知父组件更新数据
        dataShouldUpdate()
      }).catch(() => {
        ElMessage.error("更新失败")
      })
    } else {
      createProject({...form}).then(res => {
        ElMessage.success(res.data.msg)
        // 通知父组件更新数据
        dataShouldUpdate()
        dialogClose()
      }).catch(() => {
        ElMessage.error("创建失败")
      })
    }
  } catch (error) {
    ElMessage.error("字段校验未通过")
  }
}

// 表单验证规则
const rules = reactive({
  name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  introduce: [
    { required: true, message: '请输入项目介绍', trigger: 'blur' },
    { min: 10, max: 500, message: '项目介绍长度不能低于10字符, 不能高于500字符', trigger: 'blur' }
  ]
})
</script>

<style scoped>
</style>
